<template>
  <div
    :class="[
      'CodeView w-100%  py-16',
      appStore.isDeep ? 'rounded-2 bg-#1D7CBC26' : 'rounded-6 bg-#FFF',
    ]"
  >
    <n-spin :show="state.loading" style="width: 100%">
      <div v-show="state.menuOptions.length" class="min-h-224 w-100% flex">
        <div
          class="dir flex-shrink-0"
          :style="{
            borderRight: appStore.isDeep
              ? '1px solid rgba(43, 161, 255, 0.3)'
              : '1px solid #d9dee9',
          }"
        >
          <n-menu
            v-model:value="state.current"
            :options="state.menuOptions"
            :expand-icon="state.expandIcon"
            :render-icon="state.renderIcon"
            label-field="fileName"
            key-field="filePath"
            @update:value="methods.handleSelect"
          />
        </div>
        <div class="code flex-1 p-10">
          <n-scrollbar style="max-height: 400px" :x-scrollable="true">
            <n-code
              :word-wrap="true"
              language="javascript"
              :code="state.currentCode"
              :class="[appStore.isDeep ? 'color-#FFF' : '']"
            />
          </n-scrollbar>
        </div>
      </div>
    </n-spin>

    <div
      v-show="!state.menuOptions.length"
      :class="['py-10 text-center', appStore.isDeep ? 'color-#FFFFFFCC' : 'color-#000']"
    >
      暂无数据！
    </div>
  </div>
</template>
<script setup lang="jsx">
import { useAppStore } from '@/store'
import * as testObjectApi from '@/api/testObject'
import lightArrowRight from '@/assets/images/light-arrow-right.png'
import lightArrowBootom from '@/assets/images/light-arrow-bottom-active.png'
import deepArrowRight from '@/assets/images/deep-arrow-right.png'
import deepArrowBootom from '@/assets/images/deep-arrow-bottom-active.png'
defineOptions({
  name: 'CodeView',
})
const appStore = useAppStore()
const props = defineProps({
  rootPath: {
    type: String,
    default: '',
  },
})
const contentMap = new Map()
const state = reactive({
  menuOptions: [],
  current: null,
  currentCode: ``,
  expandIcon() {
    return ''
  },
  renderIcon(opt) {
    return opt.folder ? (
      <>
        <img class="right" src={appStore.isDeep ? deepArrowRight : lightArrowRight} />
        <img class="bottom" src={appStore.isDeep ? deepArrowBootom : lightArrowBootom} />
      </>
    ) : (
      ''
    )
  },
  loading: false,
})
const methods = reactive({
  async init() {
    contentMap.clear()
    state.menuOptions = []
    if (!props.rootPath) return
    state.loading = true
    const { data = [] } = await testObjectApi.getFile(props.rootPath)
    state.menuOptions = data
    state.loading = false
  },
  async handleSelect(path) {
    state.loading = true
    if (contentMap.has(path)) {
      state.currentCode = contentMap.get(path)
    } else {
      const { data = [] } = await testObjectApi.getFile(path)
      let content = data[0]?.content || ''
      state.currentCode = content
      contentMap.set(path, content)
    }
    state.loading = false
  },
})
watch(
  () => props.rootPath,
  () => {
    if (props.rootPath) {
      methods.init()
    }
  }
)
onUnmounted(() => {
  contentMap.clear()
})
</script>
<style lang="scss" scoped>
:deep(.n-menu-item) {
  --n-item-height: 32px;
  .n-menu-item-content__icon {
    .right {
      display: none;
    }
    .bottom {
      display: inline-block;
    }
  }
  .n-menu-item-content--collapsed {
    .n-menu-item-content__icon {
      .right {
        display: inline-block;
      }
      .bottom {
        display: none;
      }
    }
  }
}
:deep(.n-spin-content) {
  align-items: start;
}
</style>
